<template>
	<view>
		<view class="content f-dc">
			<u-navbar title="抄送人设置" :fixed="false" leftIconColor="#fff" :autoBack="true">
			</u-navbar>
			<view class="content_main">
				<view style="padding: 10px;background-color: #fffee9;" class="x-f">
					<button type="primary" size="mini" style="width: fit-content;" @click="addCopyer">添加成员</button>
				</view>

				<view style="padding: 10px;">

					<view
						style="min-height: 120px;max-height: 300px;overflow: auto;border: 2px solid #cecece;display: flex;flex-wrap: wrap;padding: 10px;">
						<u-tag v-for="(item,index) in copyerConfig.nodeUserList" :key="index"
							style="width: fit-content;margin: 4px 6px;min-width: 100px;" size="mini">
							<template #text>
								<view class="x-bc" style="width: 100%;">
									<view style="height: 100%;font-size: 14px;color: #fff;flex: 1;">
										<text>{{item.name}}</text>
									</view>

									<view class="x-c" @click="removeEle(copyerConfig.nodeUserList,item,'targetId')"
										style="height: 100%;border-left: 1px solid #f7f7f7;width: fit-content;padding-left: 4px;">
										<u-icon name="close" color="#fff" size="14"></u-icon>
									</view>

								</view>
							</template>
						</u-tag>


						<u-tag v-if="copyerConfig.nodeUserList && copyerConfig.nodeUserList.length != 0"
							style="width: fit-content;margin: 4px 6px;" text="清除" size="mini" type="error"
							@click="clearTags"></u-tag>
					</view>


					<u-checkbox-group v-model="ccSelfSelectFlag" placement="column"
						style="padding: 10px;margin-top: 10px;">
						<u-checkbox :customStyle="{marginBottom: '8px'}" label="允许发起人自选抄送人" :name="1">
						</u-checkbox>
					</u-checkbox-group>

				</view>
			</view>


			<view class="content_bottom x-ec" :style="$m.utils.disposeSafeBottomFun()">
				<button @click="closePage" class="content_bottom_primary_plainBtn CommonBtnSize">取消</button>
				<button @click="submitPage" class="content_bottom_primary_Btn CommonBtnSize">确定</button>
			</view>
		</view>

		<mCcRecipients :show.sync="copyerVisible" :option="option" @close="closeCopyer" @submit="submitCopyer">
		</mCcRecipients>
	</view>
</template>

<script>
	import mCcRecipients from '@/uni_modules/mc-ui/components/m-node-warp/compontent/m-ccRecipients/m-ccRecipients.vue';
	export default {
		components: {
			mCcRecipients
		},
		data() {
			return {
				option: {
					typeName: "",
					title: "",
					childDepartments: [],
					employees: [],
				},
				copyerConfig: {
					nodeUserList: [], // 选中项
					ccSelfSelectFlag: 0,
				},
				copyerVisible: false,
				ccSelfSelectFlag: [], // 是否允许发起人自选抄送人
			};
		},
		onLoad(option) {

			if (!uni.$m.utils.isEmpty(option)) {
				this.typeName = option.typeName;
				this.option.typeName = option.typeName;
				this.copyerConfig = JSON.parse(JSON.stringify(this.$store.state.BaseScreenParm));
				this.ccSelfSelectFlag = [this.copyerConfig.ccSelfSelectFlag];

			} else {
				uni.$m.utils.msg('数据异常，请重试！')
			}
		},
		methods: {
			addCopyer() { // 添加成员

				let employees = [],
					childDepartments = [];
				for (var i = 0; i < this.copyerConfig.nodeUserList.length; i++) {
					var {
						type,
						name,
						targetId
					} = this.copyerConfig.nodeUserList[i];
					if (type == 1) {
						childDepartments.push({
							employeeName: name,
							id: targetId
						});
					} else if (type == 2) {
						employees.push({
							roleName: name,
							roleId: targetId
						});
					}
				};
				this.$set(this.option, 'childDepartments', childDepartments);
				this.$set(this.option, 'employees', employees);
				this.option = uni.$m.utils.deepClone(this.option);
				this.copyerVisible = true;

			},
			closeCopyer() { // 关闭弹层
				this.copyerVisible = false;

			},
			submitCopyer(data) { // 确认弹层
				let {
					copyerRoleList,
					copyerEmployessList
				} = data;
				let nodeUserList = [];
				// this.copyerConfig.nodeUserList = [];
				console.log(data);
				// 组织架构
				copyerEmployessList.map(item => {
					nodeUserList.push({
						type: 1,
						targetId: item.id,
						name: item.employeeName
					})
				});
				// 角色列表
				copyerRoleList.map(item => {
					nodeUserList.push({
						type: 2,
						targetId: item.roleId,
						name: item.roleName
					})
				});
				this.copyerConfig.nodeUserList = nodeUserList;

				this.option.employees = [];
				this.option.childDepartments = [];
				for (var i = 0; i < nodeUserList.length; i++) {
					var {
						type,
						name,
						targetId
					} = nodeUserList[i];
					if (type == 1) {
						this.option.childDepartments.push({
							employeeName: name,
							id: targetId
						});
					} else if (type == 2) {
						this.option.employees.push({
							roleName: name,
							roleId: targetId
						});
					}
				};
				this.copyerVisible = false;

			},
			removeEle(arr, elem, key = 'id') { // 删除指定tag
				var includesIndex;
				arr.map((item, index) => {
					if (item[key] == elem[key]) {
						includesIndex = index
					}
				});
				arr.splice(includesIndex, 1);
				let employees = [],
					childDepartments = [];
				arr.forEach(item => {

					if (item.type == 2) {
						employees.push({
							roleName: item.name,
							roleId: item.targetId
						});
					} else if (item.type == 1) {
						childDepartments.push({
							employeeName: item.name,
							id: item.targetId
						});
					}
				});
				this.$set(this.option, 'childDepartments', childDepartments);
				this.$set(this.option, 'employees', employees);
				this.option = JSON.parse(JSON.stringify(this.option))

			},
			clearTags() { // 清除全部tag
				this.option.employees = [];
				this.option.childDepartments = [];
				this.copyerConfig.nodeUserList = []
			},
			closePage() { // 点击取消按钮，关闭页面
				uni.navigateBack();
			},
			submitPage() {
				this.copyerConfig.ccSelfSelectFlag = this.ccSelfSelectFlag.length == 0 ? 0 : 1;
				this.copyerConfig.error = !this.copyerStr(this.copyerConfig);

				// 触发上一页事件监听
				uni.$emit('gitCellCardInfo' + this.$store.state.nodewarpIndex, {
					data: {
						option: this.option,
						copyerConfig: this.copyerConfig
					}
				});
				this.closePage();
			},
			copyerStr(nodeConfig) {
				if (nodeConfig.nodeUserList.length != 0) {
					return this.arrToStr(nodeConfig.nodeUserList)
				} else {
					if (nodeConfig.ccSelfSelectFlag == 1) {
						return "发起人自选"
					}
				}
			},
			arrToStr(arr) {
				if (arr) {
					return arr.map(item => {
						return item.name
					}).toString()
				}
			},
		}
	}
</script>

<style lang="scss">
	.content {
		height: 100vh;

		.content_bottom {
			background-color: #fff;

			button {
				margin-right: 10px !important;
			}
		}
	}
</style>